

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F9FAFB',
  },
  
  keyboardAvoidingView: {
    flex: 1,
  },
  
  scrollView: {
    flex: 1,
  },
  
  scrollViewContent: {
    flexGrow: 1,
  },
  
  // Logo头部区域
  logoHeader: {
    paddingHorizontal: 24,
    paddingVertical: 48,
    alignItems: 'center',
  },
  
  logoContainer: {
    alignItems: 'center',
  },
  
  appLogo: {
    width: 80,
    height: 80,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  
  appName: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#FFFFFF',
    marginBottom: 8,
  },
  
  appSlogan: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.8)',
  },
  
  // 登录主区域
  loginMain: {
    flex: 1,
    paddingHorizontal: 24,
    marginTop: -24,
    position: 'relative',
    zIndex: 10,
  },
  
  loginCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 24,
    padding: 24,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.1,
        shadowRadius: 6,
      },
      android: {
        elevation: 6,
      },
    }),
  },
  
  // 登录方式切换
  loginTypeSwitch: {
    flexDirection: 'row',
    marginBottom: 32,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E7EB',
  },
  
  switchTab: {
    flex: 1,
    paddingVertical: 12,
    alignItems: 'center',
    borderBottomWidth: 2,
    borderBottomColor: 'transparent',
  },
  
  switchTabActive: {
    borderBottomColor: '#969FFF',
  },
  
  switchTabText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#6B7280',
  },
  
  switchTabTextActive: {
    color: '#969FFF',
  },
  
  // 表单容器
  formContainer: {
    gap: 24,
  },
  
  inputGroup: {
    gap: 8,
  },
  
  inputLabel: {
    fontSize: 14,
    fontWeight: '500',
    color: '#1F2937',
  },
  
  inputWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#E5E7EB',
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#FFFFFF',
  },
  
  textInput: {
    flex: 1,
    fontSize: 16,
    color: '#1F2937',
    paddingVertical: 0,
  },
  
  inputIcon: {
    marginLeft: 8,
  },
  
  passwordToggleButton: {
    paddingHorizontal: 8,
  },
  
  // 验证码输入特殊布局
  smsInputWrapper: {
    flexDirection: 'row',
    gap: 12,
  },
  
  smsInput: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#E5E7EB',
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 12,
    fontSize: 16,
    color: '#1F2937',
    backgroundColor: '#FFFFFF',
  },
  
  getSmsCodeButton: {
    backgroundColor: '#969FFF',
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 12,
    alignItems: 'center',
    justifyContent: 'center',
    minWidth: 100,
  },
  
  getSmsCodeButtonDisabled: {
    backgroundColor: '#D1D5DB',
  },
  
  getSmsCodeButtonText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#FFFFFF',
  },
  
  // 登录选项
  loginOptions: {
    gap: 12,
  },
  
  checkboxContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  
  checkbox: {
    width: 16,
    height: 16,
    borderWidth: 1,
    borderColor: '#E5E7EB',
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFFFFF',
  },
  
  checkboxChecked: {
    backgroundColor: '#969FFF',
    borderColor: '#969FFF',
  },
  
  checkboxLabel: {
    fontSize: 14,
    color: '#1F2937',
  },
  
  // 消息提示
  messageContainer: {
    marginTop: 16,
  },
  
  message: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 8,
    padding: 12,
    gap: 8,
  },
  
  errorMessage: {
    backgroundColor: '#FEE2E2',
    borderWidth: 1,
    borderColor: '#FCA5A5',
  },
  
  successMessage: {
    backgroundColor: '#D1FAE5',
    borderWidth: 1,
    borderColor: '#6EE7B7',
  },
  
  messageIcon: {
    // 图标样式在组件中通过name和color控制
  },
  
  messageText: {
    flex: 1,
    fontSize: 14,
  },
  
  errorMessageText: {
    color: '#B91C1C',
  },
  
  successMessageText: {
    color: '#166534',
  },
  
  // 登录按钮
  loginButton: {
    marginTop: 24,
    borderRadius: 12,
    overflow: 'hidden',
    ...Platform.select({
      ios: {
        shadowColor: '#969FFF',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 15,
      },
      android: {
        elevation: 8,
      },
    }),
  },
  
  loginButtonDisabled: {
    opacity: 0.6,
  },
  
  loginButtonGradient: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 16,
    gap: 8,
  },
  
  loginButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#FFFFFF',
  },
  
  loadingSpinner: {
    // 图标样式在组件中控制
  },
  
  // 忘记密码
  forgotPasswordContainer: {
    alignItems: 'center',
    marginTop: 16,
  },
  
  forgotPasswordText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#969FFF',
  },
  
  // 底部版权
  footer: {
    paddingHorizontal: 24,
    paddingVertical: 24,
    alignItems: 'center',
  },
  
  copyrightText: {
    fontSize: 12,
    color: '#6B7280',
  },
});

